<template>
  <el-row id="OnlineEnroll">
    <module-title :cn_name="'在线报名'" :en_name="'ONLINE ENROLL'"></module-title>
    <el-row class="OnlineEnroll">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-col :offset="4" :span="8" class="enroll-input">
          <el-form-item label="真实姓名">
            <el-input v-model="formInline.user" placeholder="你的姓名？"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="enroll-input">
          <el-form-item label="手机号码">
            <el-input v-model="formInline.phone" placeholder="手机号码？"></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="4" :span="8" class="enroll-input">
          <el-form-item label="QQ邮箱">
            <el-input v-model="formInline.email" placeholder="QQ邮箱？"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="enroll-input">
          <el-form-item label="报名课程">
            <el-input v-model="formInline.project" placeholder="前端/设计？"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-button type="warning" class="enroll-btn" size="large" @click="onSubmit">在线报名</el-button>
        </el-col>
      </el-form>

    </el-row>

    <el-col :span="16" :offset="4" class="notice" v-for="item in enrollNotice" :key="item" >
      <span class="shishang">{{item.id}}</span>
      <h4 align="left">{{item.title}}</h4>
      <p align="left" v-html="item.content"></p>
    </el-col>

  </el-row>
</template>
<script>
  import ModuleTitle from '../Common/module-title'
  export default {
    data(){
      return {
        formInline: {
          user: '',
          phone: '',
          email:'',
          project:''
        },
        enrollNotice:{}

      }
    },
    components : {ModuleTitle},
    mounted() {
      this.axios.get(this.$store.state.API_ROOT+ 'enrollNotice').then((response) => {
        this.enrollNotice = response.data
      })
    }
  }
</script>
<style>
  #OnlineEnroll{
    background: #eee;
    padding-bottom: 50px;
  }
  .enroll-input {
    margin-top: 30px;
  }
  .OnlineEnroll {
    background: url('../../assets/images/edit.png') no-repeat center;
    min-height:330px;
    padding-bottom: 60px;
  }
  #OnlineEnroll .notice {
    background: #fff;
    padding: 1.2em;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
  }


  @font-face
  {
    font-family: shishangzhonghei;
    src: url('../../common/font/shishangzhonghei.ttf');
  }
  .shishang
  {
    font-family:shishangzhonghei;
    font-size : 6em;
    color: #233464;
    position: absolute;
    top: -10px;
    left: -30px;
  }

  .enroll-btn {
    width: 15em;
    margin-top: 3em;
  }
</style>
